<template>
  <div class="min-h-screen bg-gray-100 pb-20">
    <!-- 页面标题 -->
    <header class="fixed top-0 left-0 w-full h-14 bg-blue-600 flex items-center z-50 px-4 shadow-md">
      <h2 class="text-white font-bold text-lg">美食分类</h2>
    </header>

    <!-- 内容区域 -->
    <div class="pt-16 px-4">

      <!-- 商家列表 -->
      <ul class="space-y-4">
        <li v-for="(shop, index) in shops" :key="index" class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="flex p-4">
            <img :src="shop.logo" alt="商家图片" class="w-16 h-16 object-cover rounded-md">
            <div class="ml-4 flex-1">
              <h3 class="text-base font-semibold">{{ shop.name }}</h3>
              <p class="text-xs text-gray-500 mt-1">评分 {{ shop.rating }} 月售{{ shop.sales }}单</p>
              <p class="text-xs text-gray-500 mt-1">
                ￥{{ shop.minOrder }}起送 | ￥{{ shop.deliveryFee }}配送
              </p>
              <p class="text-xs text-gray-500">
                {{ shop.distance }}km | {{ shop.time }}分钟
              </p>
              <div class="mt-1 inline-block bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded">
                {{ shop.description }}
              </div>
            </div>
          </div>
        </li>
      </ul>

    </div>

    <!-- 底部导航栏 -->
    <FooterMenu />
  </div>
</template>

<script setup lang="ts">
import FooterMenu from '@/components/common/FooterMenu.vue'

// 模拟美食分类下的商家数据
const shops = [
  {
    name: '万家饺子',
    logo: '/img/sj01.png',
    rating: '4.9',
    sales: '345',
    minOrder: 15,
    deliveryFee: 3,
    distance: '3.22',
    time: '30',
    description: '各种饺子'
  },
  {
    name: '小锅饭豆腐馆',
    logo: '/img/sj02.png',
    rating: '4.9',
    sales: '345',
    minOrder: 15,
    deliveryFee: 3,
    distance: '3.22',
    time: '30',
    description: '东北特色菜'
  },
  {
    name: '米村拌饭',
    logo: '/img/sj04.png',
    rating: '4.9',
    sales: '345',
    minOrder: 15,
    deliveryFee: 3,
    distance: '3.22',
    time: '30',
    description: '米饭快餐'
  }
]
</script>